<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>书城首页</title>
	<link type="text/css" rel="stylesheet" href="static/css/style.css" >
	<script type="text/javascript" src="./static/script/jquery-1.7.2.js"></script>
	<script type="text/javascript">

		var pageNo = 1;		//当前第几页，默认情况下为1
		var pageSize = 4;	//定义一个变量表示每页4条记录
		var totalPage = 1;	//总共有多少页


		$(document).ready(function(){
			//界面加载完成,获取分页列表数据并显示
			list();
		});

		//查询分页列表数据
		function list(){
			$.ajax({
				url:"/spring_mybatis_book/book/list",
				type : "POST",
				dataType :"json",
				data :{
					pageNo : pageNo,
					pageSize : pageSize
				},
				success : function (resp) {
					if(resp.code == 200){
						//成功,跳转到主页
						totalPage = resp.data.totalPage;

						var list = resp.data.list;
						var len = list.length;
						//遍历后端给的结果集
						var html ="";
						for(let i =0; i< len ; i++){
							var item = list[i];
							html += '<div class="b_list">'+
									'<div class="img_div">'+
									'<img class="book_img" alt="" src=static/img/'+item.imgpath+' />'+
									'</div>'+
									'<div class="book_info">'+
									'<div class="book_name">'+
									'<span class="sp1">书名:</span>'+
									'<span class="sp2">'+item.name+'</span>'+
									'</div>'+
									'<div class="book_author">'+
									'<span class="sp1">作者:</span>'+
									'<span class="sp2">'+item.author+'</span>'+
									'</div>'+
									'<div class="book_price">'+
									'<span class="sp1">价格:</span>'+
									'<span class="sp2">￥'+item.price+'</span>'+
									'</div>'+
									'<div class="book_sales">'+
									'<span class="sp1">销量:</span>'+
									'<span class="sp2">'+item.sales+'</span>'+
									'</div>'+
									'<div class="book_amount">'+
									'<span class="sp1">库存:</span>'+
									'<span class="sp2">'+item.stock+'</span>'+
									'</div>'+
									'<div class="book_add">'+
									'<button>加入购物车</button>'+
									'</div>'+
									'</div>'+
									'</div>';
						}

						$("#contentHtml").html(html);

					}else{
						//失败提示下
						alert(resp.msg);
					}
				}
			});
		}

		//上一页
		function upPage(){
			if(pageNo <= 1){
				pageNo = 1;
			}else{
				pageNo -= 1;
			}

			list();
		}

		//下一页
		function downPage(){
			if(pageNo >= totalPage){
				pageNo = totalPage;
			}else{
				pageNo += 1;
			}

			list();
		}


	</script>
</head>
<body>

<div id="header">
	<img class="logo_img" alt="" src="static/img/logo.gif" >
	<span class="wel_word">网上书城</span>
	<div>
		<a href="pages/user/login.html">登录</a> |
		<a href="pages/user/regist.html">注册</a> &nbsp;&nbsp;
		<a href="pages/cart/cart.html">购物车</a>
		<a href="pages/manager/manager.html">后台管理</a>
	</div>
</div>
<div id="main">
	<div id="book">
		<div class="book_cond">
			<form action="" method="get">
				价格：<input id="min" type="text" name="min" value=""> 元 -
				<input id="max" type="text" name="max" value=""> 元
				<input type="submit" value="查询" />
			</form>
		</div>
		<div style="text-align: center">
			<span>您的购物车中有3件商品</span>
			<div>
				您刚刚将<span style="color: red">时间简史</span>加入到了购物车中
			</div>
		</div>

		<div id="contentHtml">

		</div>

		<!-- <div class="b_list">
            <div class="img_div">
                <img class="book_img" alt="" src="static/img/default.jpg" />
            </div>
            <div class="book_info">
                <div class="book_name">
                    <span class="sp1">书名:</span>
                    <span class="sp2">时间简史</span>
                </div>
                <div class="book_author">
                    <span class="sp1">作者:</span>
                    <span class="sp2">霍金</span>
                </div>
                <div class="book_price">
                    <span class="sp1">价格:</span>
                    <span class="sp2">￥30.00</span>
                </div>
                <div class="book_sales">
                    <span class="sp1">销量:</span>
                    <span class="sp2">230</span>
                </div>
                <div class="book_amount">
                    <span class="sp1">库存:</span>
                    <span class="sp2">1000</span>
                </div>
                <div class="book_add">
                    <button>加入购物车</button>
                </div>
            </div>
        </div> -->


	</div>

	<div id="page_nav">
		<a href="#" onclick="upPage();">上一页</a>
		<a href="#" onclick="downPage();">下一页</a>
	</div>

</div>

<div id="bottom">
		<span>
			三体网上书城.Copyright &copy;2020
		</span>
</div>
</body>
</html>